<template>
  <!-- MineGame详情 -->
  <el-dialog v-if="props.show" :modelValue="props.show" custom-class="detailData" :title="selectToLabel(indexStore.gameArray, props.checkedItem.game_id)" 
    width="60%" top="8vh" :close-on-click-modal="false" :close-on-press-escape="false" @close="onHideDetails">
    <div class="border-box" v-loading="data.loading">
      <template v-for="(item, index) in data.filArr" :key="index">
        <div class="flex list" v-show="item.visible">
          <div class="width20"> {{item.label }} </div>
          <span v-if="item.key=='game_id'">
            <div class="gameIcon marginB5">
              <div class="flex marginR5">
                <el-tag size="small">{{ GamePlatform(indexStore.gameArray, props.checkedItem.game_id) }}</el-tag>
                <img class="game-icon" :src="selectToLabel(GAMEICON, props.checkedItem.game_id)" alt="">
              </div>
              {{ selectToLabel(indexStore.gameArray, props.checkedItem.game_id) }}
            </div>
          </span>
          <span v-else-if="item.key=='win_lose'||item.key=='bet'||item.key == 'win'||item.key=='enter_money'||item.key == 'after_settlement_money' " 
          :class="colorClass(item.value)">{{ BigWan(item.value) }}</span>
          <span v-else>{{ item.value }}</span>
        </div>
      </template>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import { setTimestampTime } from '@/utils/time'
import { BigWan, BigMinus } from '@/utils/math'
import { GAMEICON } from '@/config/eunm'
import { selectToLabel,colorClass,GamePlatform } from '@/utils/index'
import { getGameDetails } from '@/api/user'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const data = reactive({
  filArr: [] as any[],
  loading: false,
  // 风险
  levelList: [
    { label:'低', value: 1 },
    { label:'中', value: 2 },
    { label:'高', value: 3 },
  ],
  // 选择大小
  belowList: [
    { label:'小', value: 0 },
    { label:'大', value: 1 },
  ],
  // 派奖结果
  statusList: [
    { label:'手动提现', value: 1 },
    { label:'自动提现', value: 2 },
    { label:'派奖', value: 3 },
  ],
  gameKeyData:{
    10000001:['point','hit','payout','row','level','multi'], //【10000001】Plinko
    10000002:['count','rounds','pos','mines','payout','multi'], //【10000002】Mines
    10000003:['num','below','payout','multi','hit'], //【10000003】Dice
    10000004:['num','payout','multi','hit'], //【10000004】Limbo
    10000005:['selected','eggs','plays'], //【10000005】DragonTower
    10000006:['cashoutAt','status','payout','multi'], //【10000006】Crash
    10000007:['selected','drawn','risk','payout','multi'], //【10000007】Keno 
    10000008:['hit','level','risk','payout','multi'], //【10000008】Wheel 
    10000009:['startCard','rounds','card','guess','payoutMultiplier'], //【10000009】Hilo 
    10000011:['hand','payout','multi'], //【10000011】Diamonds
    10000012:['cashoutAt','status','payout','multi'], //【10000012】Slide
    10000013:['hit','colors','numbers','parities','ranges','rows','payout','multi'], //【10000013】Roulette
    10000102:['count','rounds','pos','mines','payout','multi'], //【10000002】Mines
    10000103:['num','below','payout','multi','hit'], //【10000003】Dice
    10000105:['startCard','rounds','card','guess','payoutMultiplier'], //【10000009】Hilo 
    10000106:['point','hit','payout','row','level','multi'], //【10000001】Plinko
  } as any,
})

watch(
  () => [props.checkedItem,props.show],
  async (value) => {
    if (value[0] && value[1]) {
      gameDetails(props.checkedItem)
    }
  },
)

// 详情
const gameDetails = async(row:any) => {
  try {
    data.loading = true
    let dataRes = await getGameDetails({
      uuid:row.uuid_str,
      uid:row.uid,
      agent_id:row.agent_id,
    })
    data.loading = false
    let res = JSON.parse(dataRes.data.log_json)
    console.log('MineGame详情'+'('+dataRes.data.round_id_str+')',res);
    data.filArr = [
      { label: '游戏', value: selectToLabel(indexStore.gameArray, dataRes.data.game_id), visible: true, key: 'game_id' },
      { label: '牌局编号', value: dataRes.data.round_id_str, visible: true, key: 'round_id_str' },
      { label: '时间', value: setTimestampTime(dataRes.data.save_time_stamp), visible: true, key: 'created_time_stamp' },
      { label: '货币类型', value: res.currency, visible: true, key: 'currency' },
      { label: '下注前', value: dataRes.data.enter_money, visible: true, key: 'enter_money' },
      { label: '结算后', value: dataRes.data.after_settlement_money, visible: true, key: 'after_settlement_money' },
      { label: '下注金额', value: dataRes.data.bet, visible: true, key: 'bet' },
      { label: '玩家输赢', value: BigMinus(dataRes.data.win,dataRes.data.bet), visible: true, key: 'win_lose' },
      // 公共显示
      { label: '派奖', value: res.payout, visible: checkKeyShow('payout'), key: 'payout' },
      { label: '派奖倍率', value: res.multi, visible: checkKeyShow('multi'), key: 'multi' },
      { label: '命中数值', value: res.hit, visible: checkKeyShow('hit'), key: 'hit' },
      { label: '排数', value: res.row, visible: checkKeyShow('row'), key: 'row'},
      { label: '选择数值(万分)', value: res.num, visible: checkKeyShow('num'), key: 'num' },
      { label: '提现倍数', value: res.cashoutAt, visible: checkKeyShow('cashoutAt'), key: 'cashoutAt' },
      { label: '派奖结果', value: selectToLabel(data.statusList, res.status), visible: checkKeyShow('status'), key: 'status' },
      { label: '风险', value: selectToLabel(data.levelList, res.level), visible: checkKeyShow('level'), key: 'level' },
      { label: '所选下标', value: res.selected, visible: checkKeyShow('selected'), key: 'selected'},
      { label: '轮次信息', value: res.rounds, visible: checkKeyShow('rounds'), key: 'rounds' },
      //【 10000001 】 Plinko
      { label: 'plinko特殊系数', value: res.point, visible: checkKeyShow('point'), key: 'point' },
      //【 10000002 】 Mines
      { label: '地雷数量', value: res.count, visible: checkKeyShow('count'), key: 'count' },
      { label: '玩家每轮点击位子信息', value: res.rounds, visible: checkKeyShow('rounds'), key: 'rounds'  },
      { label: '点击的格子下标', value: res.pos, visible: checkKeyShow('pos'), key: 'pos' },
      { label: '地雷所在格子下标数组', value: res.mines, visible: checkKeyShow('mines'), key: 'mines' },
      //【 10000003 】 Dice
      { label: '选择的大小', value: selectToLabel(data.belowList, res.below), visible: checkKeyShow('below'), key: 'below' },
      //【 10000005 】 DragonTower
      { label: '系统龙塔每层的蛋的位子', value: res.eggs, visible: checkKeyShow('eggs'), key: 'eggs' },
      { label: '系统龙塔每层的蛋的位子', value: res.plays, visible: checkKeyShow('plays'), key: 'plays' },
      //【 10000007 】 Keno  
      { label: '中奖下标', value: res.drawn, visible: checkKeyShow('drawn'), key: 'drawn' },
      //【 10000008 】 Wheel   
      { label: '分段', value: res.level, visible: checkKeyShow('level'), key: 'level' },
      //【 10000009 】 Hilo
      { label: '起始卡牌', value: res.startCard, visible: checkKeyShow('startCard'), key: 'startCard' },
      { label: '该轮次卡牌', value: res.card, visible: checkKeyShow('card'), key: 'card' },
      { label: '玩家选择', value: res.guess, visible: checkKeyShow('guess'), key: 'guess' },
      { label: '该轮次倍率', value: res.payoutMultiplier, visible: checkKeyShow('payoutMultiplier'), key: 'payoutMultiplier' },
      //【 10000011 】 Diamonds 
      { label: '宝石类型数组', value: res.hand, visible: checkKeyShow('hand'), key: 'hand' },
      //【 10000013 】 Roulette 
      { label: '颜色押注信息', value: res.colors, visible: checkKeyShow('colors'), key: 'colors' },
      { label: '数字押注信息', value: res.numbers, visible: checkKeyShow('numbers'), key: 'numbers' },
      { label: '单双押注信息', value: res.parities, visible: checkKeyShow('parities'), key: 'parities' },
      { label: '范围押注信息', value: res.ranges, visible: checkKeyShow('ranges'), key: 'ranges' },
      { label: '行押注信息', value: res.rows, visible: checkKeyShow('rows'), key: 'rows' },
    ]
  } catch (error) {
    data.loading = false
  }
}

// 检查字段在那个游戏展示
const checkKeyShow = (key:string)=>{
  return data.gameKeyData[props.checkedItem.game_id].includes(key)
}

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>
<style scoped lang="scss">
.border-box {
  padding-bottom: 40px;
  font-size: 14px;
  color: var(--text);
}

.fily {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .fily-list {
    width: 50%;
  }
}

.flight {
  width: 100%;
}

.list {
  font-weight: bold;
  height: 36px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
</style>